<template>
  <view class="menu-nav">
    <view 
      class="menu-item" 
      v-for="(item, index) in menus" 
      :key="index"
      @click="handleClick(item)"
    >
      <image :src="item.icon" mode="aspectFit" class="menu-icon"></image>
      <text class="menu-text">{{ item.name }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'MenuNav',
  props: {
    menus: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(item) {
      if (item.url) {
        if (item.type === 'tab') {
          uni.switchTab({
            url: item.url
          })
        } else {
          uni.navigateTo({
            url: item.url
          })
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-nav {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 0 20rpx 20rpx;
  
  .menu-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 0;
    
    .menu-icon {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }
    
    .menu-text {
      font-size: 24rpx;
      color: #666;
    }
  }
}
</style> 